<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Hometown</title>
    <script src="JQuery/jquery-3.4.1.min.js"></script>
    <script src="JQuery/jquery-ui.min.js"></script>
    <script src="JQuery/jquery-ui.js"></script>
    <link href="mystyle/index.css" rel="stylesheet">
    <script type="text/javascript" src="JQuery/swiper.js" charset="utf-8"></script>

    <script src="myscript/index.js"></script>


</head>
<body>
<!--页面一-->
<div id="content1">

    <!--    上面的盒子-->

    <div id="mainContent">


        <div id="navgation">
            <ul class="ul_nav">
                <li class="first_li"><a href="#">山城重庆</a></li>
                <li><a href="#">重庆南川</a></li>
                <li><a href="#">重庆南川</a></li>
                <li><a href="#">重庆南川</a></li>
                <li><a href="#">重庆南川</a></li>

            </ul>

        </div>

        <div id="upDiv">

            <!--        左边的盒子-->
            <div id="left_box">
                <div id="des_hometown">
                    <h3>南川——山城重庆的一枝花</h3>
                    <article>
                        <p>南川区历史悠久，春秋时为巴国属地，</p>
                        <p>南川之名始于元世祖时期。</p>
                        <p>南江在綦，而其一源出自南川，遂以南川之名名其发源县。境内金佛山（国家5A景区）</p>
                        <p>被誉为“南方如初佛地，巴蜀第一名山”，素有“北有峨眉、南有金佛，东朝普陀、西拜金佛”之说。</p>


                    </article>
                </div>


                <!--这是轮播图内容-->

                <div id="swiper">


                    <div id="swiper_content">

                        <div id="focusAreaBox">
                            <div id="focusPicBox">
                                <ul>
                                    <li><a href="#"><img width="500px" src="images/descoration.png"></a></li>
                                    <li><a href="#"><img width="500px" src="images/descoration.png"></a></li>
                                    <li><a href="#"><img width="500px" src="images/descoration.png"></a></li>
                                </ul>
                            </div>
                            <div id="focusTitleBox"></div>
                            <div id="focusNavBox"></div>
                        </div>


                    </div>

                    <!--                轮播图-->
                </div>


            </div>


            <!--        右边的盒子-->
            <div id="right_box">
                <div id="login">
                    <div class="Login_header">
                        <h2  title="点击我，进入小窗口"><a class="peopleLogin" href="#">用户登录</a></h2>
                        <div title="点击更换头像" id="adm_photo">
                            <img height="100px" src="images/pic21.gif">
                        </div>
                    </div>

                    <form id="Form_login">
                        <article class="Form_art">User Login</article>

                        <label for="username" class="username">账号:</label>
                        <div class="login_des">
                            <img height="20px" src="images/user.jpg">
                            <input id="username" type="text" placeholder="请输入账号">
                        </div>


                        <label for="password" class="password">密码:</label>
                        <div class="login_des">
                            <img width="20px" height="15px" src="images/password.jpg" class="img_login">
                            <input id="password" type="password" placeholder="请输入密码">
                        </div>


                        <p><a href="#">忘记密码？</a></p>
                        <button id="loginIn">登录</button>
                        <button id="joinIn">未注册？Click Here！</button>
                    </form>


                </div>
                <div id="otherThing">
                    <h3>❧快乐咨询❧</h3>
                    <ul class="Ul_happyKnow">
                        <li><a href="#">快乐咨询一</a></li>
                        <li><a href="#">快乐咨询一</a></li>
                        <li><a href="#">快乐咨询一</a></li>
                        <li><a href="#">快乐咨询一</a></li>
                        <li><a href="#">快乐咨询一</a></li>
                        <li><a href="#">快乐咨询一</a></li>
                        <li><a href="#">快乐咨询一</a></li>
                        <li><a href="#">快乐咨询一</a></li>
                        <li><a href="#">快乐咨询一</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--    下面的盒子-->
        <div id="downDiv">
            <!--        <h2>标题</h2>-->

            <div id="footerImg">
                <div id="title">
                    <h3>标题</h3>

                </div>
                <div class="Container_img_h3">
                    <div class="container"><img width="150px" src="images/mountain.jpg"></div>
                    <h3>小标题1</h3>
                </div>
                <div class="Container_img_h3">
                    <div class="container"><img width="150px" src="images/bacgr.jpeg"></div>
                    <h3>小标题2</h3>
                </div>
                <div class="Container_img_h3">
                    <div class="container"><img width="150px" src="images/mountain.jpg"></div>
                    <h3>小标题3</h3>
                </div>
                <div class="Container_img_h3">
                    <div class="container"><img width="150px" src="images/bacgr.jpeg"></div>
                    <h3>小标题4</h3>
                </div>

                <div class="Container_img_h3">
                    <div class="container"><img width="150px" src="images/mountain.jpg"></div>
                    <h3>小标题5</h3>
                </div>



            </div>
            <!--        <img class="footerImg_hr"  src="images/footer.png">-->
            <p id="descoration"></p>


            <div id="footer">
                <div class="navTo">
                    <div class="buttonDiv"><a href="index.html">首页</a></div>
                    <div class="buttonDiv"><a href="Content1.html">页面一</a></div>
                    <div class="buttonDiv"><a href="Content2.html">页面二</a></div>
                    <div class="buttonDiv"><a href="Content3.html">页面三</a></div>
                    <div class="buttonDiv"><a href="Content4.html">页面四</a></div>


                </div>
                <div id="contact">
                    <div class="buttonDivElse"><a href="#">其他问题</a></div>
                    <div class="buttonDivElse"><a href="#">联系我们</a></div>
                    <audio controls loop autoplay src="http://music.163.com/song/media/outer/url?id=229072.mp3" >

                    </audio>

                </div>


            </div>
        </div>

    </div>
</div>

</body>
</html>